<template>
  <div class="users-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="users">
        <el-table :data="users" v-loading="loading">
          <el-table-column align="center" label="unid" prop="unid"></el-table-column>
          <el-table-column
            align="center"
            label="用户名"
            prop="username"
          ></el-table-column>
          <el-table-column align="center" label="昵称" prop="nickname"></el-table-column>
          <el-table-column
            align="center"
            label="vip等级"
            prop="vipLevel"
          ></el-table-column>
          <el-table-column label="操作">
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="添加角色" name="roles">角色管理</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import * as api from "../../../api";
export default {
  data() {
    return {
       activeName: "user",
    loading: true,
    users: [],
    };
  },
  created() {
  api.getAllUsersApi().then((res) =>{
    this.loading = false;
    this.users = res.data.data;
  });
},
methods: {
  handleClick(tab, event) {
    console.log(tab, event);
  },
},
};

</script>